<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="css/zxf_page.css"/>
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>


    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <style>
        .container {
            width: 1000px;
        }

        .commentbox {
            width: 900px;
            margin: 20px auto;
        }

        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }

        .comment-list {
            width: 900px;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }

        .comment-list .comment-info {
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }

        .comment-list .comment-info header {
            width: 10%;
            position: absolute;
        }

        .comment-list .comment-info header img {
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }

        .comment-list .comment-info .comment-right {
            padding: 5px 0px 5px 11%;
        }

        .comment-list .comment-info .comment-right h3 {
            margin: 5px 0px;
        }

        .comment-list .comment-info .comment-right .comment-content-header {
            height: 25px;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span {
            padding-right: 2em;
            color: #aaa;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span.reply-btn, .send, .reply-list-btn {
            cursor: pointer;
        }

        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply {
            border-bottom: 1px dashed #ccc;
        }

        .comment-list .comment-info .comment-right .reply-list .reply div span {
            padding-left: 10px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply p span {
            padding-right: 2em;
            color: #aaa;
        }
    </style>
</head>

<body class="hold-transition skin-red sidebar-mini">
<div class="container" id="mybody">
    <div class="commentbox">
        <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
        <div class="btn btn-info pull-right" id="comment">评论</div>
    </div>
    <div class="comment-list">
    </div>

</div>
<div class="zxf_pagediv"></div>
<!-- .box-body -->
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.comment.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/zxf_page.js">

</script>
<script>
var pagecount = 1 ;
var currentPage ;
    $(function () {
        $.get("http://localhost:8080/img/findwords", {currentPage:currentPage}, function (data) {
            if (data.code = 1) {
                var arr = [];
                $.each(data.data, function () {
                    arr.push({
                        id: this.id,
                        img: "./img/img.jpg",
                        replyName: "帅大叔",
                        beReplyName: "匿名",
                        content: this.text,
                        time: this.date,
                        address: "深圳",
                        osname: "",
                        browse: "谷歌",
                        replyBody: []
                    })
                });
                $(".comment-list").addCommentList({data: arr, add: ""});
            }
        })


    })


    //初始化数据
    var arr = [
        {
            id: 1,
            img: "./images/img.jpg",
            replyName: "帅大叔",
            beReplyName: "匿名",
            content: "同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",
            time: "2017-10-17 11:42:53",
            address: "深圳",
            osname: "",
            browse: "谷歌",
            replyBody: []
        },
        {
            id: 2,
            img: "./images/img.jpg",
            replyName: "匿名",
            beReplyName: "",
            content: "到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”",
            time: "2017-10-17 11:42:53",
            address: "深圳",
            osname: "",
            browse: "谷歌",
            replyBody: [{
                id: 3,
                img: "",
                replyName: "帅大叔",
                beReplyName: "匿名",
                content: "来啊，我们一起吃鸡",
                time: "2017-10-17 11:42:53",
                address: "",
                osname: "",
                browse: "谷歌"
            }]
        },
        {
            id: 3,
            img: "./images/img.jpg",
            replyName: "帅大叔",
            beReplyName: "匿名",
            content: "同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",
            time: "2017-10-17 11:42:53",
            address: "深圳",
            osname: "win10",
            browse: "谷歌",
            replyBody: []
        }
    ];
    $(function () {

        // $(".comment-list").addCommentList({data:arr,add:""});
        $("#comment").click(function () {
            var obj = new Object();
            obj.img = "./img/img.jpg";
            obj.replyName = "懒人";
            obj.content = $("#content").val();
            obj.browse = "深圳";
            obj.osname = "win10";
            obj.replyBody = "";
            $(".comment-list").addCommentList({data: [], add: obj});
            $.get("http://localhost:8080/img/addword", {word: $("#content").val()}, function (data) {

            })
            $("#content").val("");
        });

    })
    //翻页
    $(".zxf_pagediv").createPage({
        pageNum: 20,
        current: 1,
        backfun: function(e) {
            currentPage =   e.current ;
        }
    });
</script>
</html>


